import StateTab from '@/components/StateTab';
import { DatePicker, message, Table } from 'antd';
import React, { useEffect, useState } from 'react';
import ExportFormData from '@/components/ExportFormData';
import { TabColumnsItem } from './data';
import styles from './index.less';
import { getDataList } from './service';

const { RangePicker } = DatePicker;
const { log } = console;

const timeData = {
  dateBegin: 0,
  dateEnd: 0,
};

const DataPage: React.FC<{}> = () => {
  const [loading, setLoading] = useState<boolean>(true);
  const [dataSource, setDataSource] = useState<[]>([]);
  const [total, setTotal] = useState<number>(0);
  const [pageCurrent, setPageCurrent] = useState<number>(1);

  const tableListView = async (pageIndex = 1, pageSize = 10) => {
    const { dateBegin, dateEnd } = timeData;
    setPageCurrent(pageIndex);
    setLoading(true);
    const { code, data, total: backTotal, info } = await getDataList({
      pageIndex,
      pageSize,
      dateBegin,
      dateEnd,
    });
    log(data);

    setLoading(false);
    if (code != 0) {
      message.error(info);
      return;
    }

    const list = data.map((item, index) => {
      return {
        key: index,
        name: item.name,
        total: item.replyCount,
        pass: item.passReplyCount,
        integral: item.commissionScore,
      };
    });

    setTotal(backTotal);
    setDataSource(list);
  };

  useEffect(() => {
    tableListView();
  }, []);

  const dateChange = async (date, dateStr) => {
    log(date);
    if (!date) return;
    log(dateStr);
    // timeData.dateBegin = date[0].valueOf()
    // timeData.dateEnd = date[1].valueOf()

    timeData.dateBegin = new Date(`${dateStr[0]} 00:00:00`).getTime();
    timeData.dateEnd = new Date(`${dateStr[1]} 24:00:00`).getTime();
    // let data = await getDataList({ pageIndex: 1, pageSize: 10, dateBegin: date[0].valueOf(), dateEnd: date[1].valueOf() })
    tableListView();
  };

  const selectTab = async (item) => {
    log('--------------------------', item);
    const { index } = item;
    timeData.dateBegin = 0;
    timeData.dateEnd = 0;
    if (index === 2) {
      const now: Date = new Date();
      timeData.dateEnd = new Date(
        `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()}`,
      ).getTime();
      timeData.dateBegin = timeData.dateEnd - 1000 * 60 * 60 * 24 * 30;
    }

    tableListView();
  };

  const tabColumns: TabColumnsItem[] = [
    {
      key: 'title',
      text: '时间',
      index: 0,
    },
    {
      key: 'tab',
      text: '全部',
      index: 1,
    },
    {
      key: 'tab',
      text: '30天',
      index: 2,
    },
  ];

  const columns = [
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '答题数',
      dataIndex: 'total',
      key: 'total',
    },
    {
      title: '答题通过数',
      dataIndex: 'pass',
      key: 'pass',
    },
    {
      title: '分成积分',
      dataIndex: 'integral',
      key: 'integral',
    },
  ];

  return (
    <div className={styles.main}>
      <StateTab className={styles['tab-box']} tabs={tabColumns} selectTab={selectTab}>
        <div className={styles['date-box']}>
          <RangePicker
            onChange={(date, dateStr) => {
              dateChange(date, dateStr);
            }}
          />
        </div>
      </StateTab>
      <ExportFormData
        className={styles.space10}
        action="/service/partTimerWb/user/searchDataStats"
        data={{ dateBegin: timeData.dateBegin, dateEnd: timeData.dateEnd }}
        columns={['姓名', '答题数', '答题通过数', '分成积分']}
        afterRequest={(response) => response.data}
      />
      <Table
        dataSource={dataSource}
        loading={loading}
        columns={columns}
        pagination={{
          pageSize: 10,
          total,
          current: pageCurrent,
          onChange: (index) => {
            tableListView(index);
          },
        }}
      />
    </div>
  );
};

export default DataPage;
